// 用于大屏场景（industryAPPContainer）使用的全局通用部分样式，这为简易方案，后续对接也方便
// 这个版本为【蓝底通用版】样式

// 注意，这个文件中，所有的样式必须写在iwhale-前缀样式（如iwhale-industrystyle）之下，以保证不会影响到其他厂商；
// 也因此，这个文件暂时不能用于覆盖popper弹出层样式！依然必须在popper-class内附带专用的iwhale-industrystyle

// ！！！这里使用到的样式禁止!important声明！！！
// 保留实际组件覆盖的机会。这里的样式仅仅是用于尽可能的涵盖通用样式，以减少目前填坑的工作量
@import './industryLY.scss';
@import './industryGT.scss';
@import './iwhaleDashboard.scss';

$IWindustryPopBgColor: rgba(23, 37, 55, 0.9);
$IWindustryPrimaryTextColor: #4F9FFF;
$IWindustryDisableTextColor: #606266;

.iwhale-industrystyle {
  // css变量

  // 基本
  // 主题色
  --iw-theme-color: #4F9FFF;
  // 文字色
  --iw-text-color: #E8F3FE;
  // 表单标签色
  --iw-form-label-color: rgba(232, 242, 254, 0.7);
  --event-label-color: rgba(232, 242, 254, 0.7);
  --event-active-color: #1373E6;
  --event-collect-color: #CCE3FF; // 告警详情里的收藏按钮颜色
  --event-collectactive-color: #1373E6;

  .el-tag {
    .el-tag__close.el-icon-close {
      font-size: 16px;
      transform: none;
      top: 0;
      color: var(--iw-text-color);
      background-color: transparent;
      &:hover {
        color: #ED5158;
      }
      &::before {
        content: '\ec12';
        font-family: 'iconfont';
      }
    }
  }

  // 工具提示覆写
  &.el-tooltip__popper.is-dark {
    background: rgba(23, 37, 55, 0.9);
  }
  // 输入框覆写
  .el-input {
    .el-input__inner {
      padding: 0 15px 0 12px;
    }
    &.el-input--prefix {
      .el-input__inner {
        padding: 0 15px;
      }
    }
    .el-input-group__prepend {
      background-color: rgba(79, 159, 255, 0.2);
    }
    &.is-focus {
      .el-input__inner {
        border-color: rgba(79, 159, 255, 0.4);
      }
    }
    &.is-disabled {
      .el-input__inner {
        border-color: transparent;
        background-color: rgba(79, 159, 255, 0.2);
      }
    }
  }
  .el-textarea__inner {
    border-color: transparent;
    color: var(--iw-text-color);
    background: rgba(79, 159, 255, 0.2);
    &:hover {
      border-color: rgba(79, 159, 255, 0.6);
    }
    &:focus {
      border-color: rgba(79, 159, 255, 1);
    }
    &::placeholder {
      color: rgba(232, 243, 254, 0.7);
    }
  }
  .el-input__inner {
    border-color: transparent;
    color: var(--iw-text-color);
    background: rgba(79, 159, 255, 0.2);
    .el-input.is-disabled .el-input__inner
    .el-icon-circle-close:before { // 统一覆写所有的el-icon-circle-close。注意，这会使得系统里失去原来那个空心版本
      color: var(--iw-text-color);
      font-size: 20px;
      font-family: 'iconfont';
      content: "\ec12"; // FIXME 注意，这个是基于iconfont的值，应该是涂色版的关闭图标，如果图标库有变动会出问题
    }

    &::placeholder {
      color: rgba(232, 243, 254, 0.7);
    }
    &:not([readonly]):not([disabled]) {
      &:hover {
        border-color: rgba(79, 159, 255, 0.6);
      }
      &:focus {
        border-color: rgba(79, 159, 255, 1);
      }
    }
    &.is-active {
      border-color: rgba(79, 159, 255, 1);
      &:hover {
        border-color: rgba(79, 159, 255, 1);
      }
    }
    &:disabled {
      border-color: transparent;
      color: var(--iw-text-color);
    }
    &[readonly] {
      border-color: transparent;
      color: var(--iw-text-color);
      &:focus {
        border-color: transparent;
      }
    }
  }
  .el-input__suffix-inner {
    color: var(--iw-text-color);
    .el-icon-circle-close:before { // 统一覆写所有的el-icon-circle-close。注意，这会使得系统里失去原来那个空心版本
      color: var(--iw-text-color);
      font-size: 20px;
      font-family: 'iconfont';
      content: "\ec12"; // FIXME 注意，这个是基于iconfont的值，应该是没有圈圈的关闭图标，如果图标库有变动会出问题
    }
    // 选择器下拉箭头修改
    .el-select__caret{
      transform: rotateZ(0deg);
      &.is-reverse {
        transform: rotateZ(180deg);
      }
      &.el-input__icon {
        &.el-icon-arrow-up{
          &::before {
            color: var(--iw-text-color);
            font-size: 20px;
            font-family: 'iconfont';
            content: '\ec16';
          }
        }
      }
    }
  }

  // 分页器覆写
  .el-pagination.is-background.el-pagination--small,
  .el-pagination {
    line-height: 1;
    padding: 0;
    button.btn-prev, button.btn-next {
      color: var(--iw-text-color);
      background: none;
      padding: 0;
      min-width: 20px;
    }
    // 替换分页器按钮为iconfont版本（会影响尺寸）
    button.btn-prev {
      margin-left: 0;
      margin-right: 6px;
      padding: 0;
      min-width: auto;
      .el-icon.el-icon-arrow-left {
        &::before {
          font-size: 20px;
          content: '\ec04';
          font-family: 'iconfont';
          font-weight: 400;
        }
      }
    }
    button.btn-next {
      margin-left: 6px;
      margin-right: 0;
      padding: 0;
      min-width: auto;
      .el-icon.el-icon-arrow-right {
        &::before {
          font-size: 20px;
          content: '\ec15';
          font-family: 'iconfont';
          font-weight: 400;
        }
      }
    }
    li.number {
      margin: 0;
      background-color: transparent;
      border-radius: 4px;
      color: var(--iw-text-color);
      &:not(.disabled):hover {
        color: #1373E6;
      }
      &:not(.disabled).active {
        background-color: #4F9FFF;
        &:hover {
          color: var(--iw-text-color);
        }
      }
      + li.number {
        margin-left: 4px;
      }
    }
  }

  // 开关覆写
  .el-switch {
    height: 16px;
    line-height: 16px;
    span.el-switch__core {
      height: 16px;
      background-color: #909399;
      border-color: #909399;
      &::after {
        top: 1.5px;
        left: 2px;
        width: 12px;
        height: 12px;
      }
    }
    &.is-checked {
      span.el-switch__core {
        background-color: #1373E6;
        border-color: #1373E6;

        &::after {
          left: 100%;
          margin-left: -14px;
        }
      }
    }
  }
  // 选择下拉框覆写
  .el-select {
    .el-select__input {
      color: var(--iw-text-color);
    }
    .el-input{
      &.is-disabled {
        opacity: 0.4;
        .el-input__inner:hover {
          border-color: transparent;
        }
      }
      &.is-focus {
        .el-input__inner {
          border-color: rgba(79, 159, 255, 1);
        }
      }
    }
    .el-input__inner[readonly] {
      &:focus {
        border-color: rgba(79, 159, 255, 1);
      }
    }

    &:hover {
      .el-input__inner {
        border-color: rgba(79, 159, 255, 0.6);
      }
    }
  }
  .el-select__tags {
    .el-tag {
      border: none;
      font-size: 14px;
      background-color: rgba(79,159,255,0.2);
      color: var(--iw-text-color);
      max-width: calc(100% - 4.5em);

      .el-tag__close.el-icon-close {
        background-color: transparent;
        color: var(--iw-text-color);
        transform: none;
        margin-left: 0;
        margin-right: 12px;
        &::before {
          font-size: 20px;
          font-family: 'iconfont';
          content: "\ec12";
        }
        &:hover {
          color: #4F9FFF;
        }
      }
    }
  }
  &.el-select-dropdown {
    background-color: #0F1926;
    border: none;
    margin-top: 6px;
    margin-bottom: 6px;

    .el-select-dropdown__wrap {
      .el-select-dropdown__list {
        padding: 0;
        border-radius: 4px;
        overflow: hidden;
      }
    }

    .el-select-dropdown__item {
      padding: 0 12px;
    }
    // 多选时，下拉的选中项目不需要背景色
    &.is-multiple {
      .el-select-dropdown__item {
        padding: 0 12px;
        .el-checkbox {
          &.is-checked .el-checkbox__label {
            color: #409eff;
          }
          .el-checkbox__label {
            padding-left: 6px;
            color: var(--iw-text-color);
          }
        }
        &.selected {
          background-color: transparent;
        }
      }
    }

    .el-select-dropdown__item {
      color: var(--iw-text-color);

      // 按照设计师要求，覆写el-select原本的滞留hover属性，只有严格悬停才会hover
      &.hover {
        background-color: transparent;
        &:hover {
          background-color: rgba(79,159,255,0.4);
        }
      }
      &:hover {
        background-color: rgba(79,159,255,0.4);
      }
      &.selected {
        color: #4F9FFF;
        background-color: rgba(79,159,255,0.4);
      }
    }

    .popper__arrow {
      display: none;
    }
  }
  // 按钮覆写
  .el-button {
    padding-top: 0;
    padding-bottom: 0;
    border: none;
    font-size: 14px;
    &.el-button--text.el-picker-panel__link-btn {
      color: $IWindustryPrimaryTextColor;
    }
    &.el-button--default {
      color: var(--iw-text-color);
      background: rgba(79, 159, 255, 0.20);
    }
    &.el-button--primary {
      color: var(--iw-text-color);
      background: linear-gradient(90deg, #4D9AF7 0%, #0862CD 100%);
    }
    &.el-button--danger {
      color: #FF7F85;
      background: rgba(237,83,90,0.2);
    }
    &.el-button--text {
      color: var(--iw-text-color);
      &:hover,
      &:focus {
        color: var(--iw-text-color);
      }
    }

    &:hover {
      opacity: 0.6;
    }
    &:active {
      opacity: 0.8;
    }
    &.is-disabled {
      opacity: 0.4;
    }
  }

  // 单选框覆写
  .el-radio {
    .el-radio__input {
      .el-radio__inner {
        border-color: #1373E6;
        background: transparent;
      }
      &.is-checked {
        .el-radio__inner::after {
          background-color: #ffffff;
          width: 6px;
          height: 6px;
        }
        .el-radio__inner {
          border-color: #1373E6;
          background: #1373E6;
        }
      }
    }
    &.is-checked {
      .el-radio__label {
        color: #E8F2FE;
      }
    }
    .el-radio__label {
      color: #E8F2FE;
    }
  }


  // 复选框覆写
  .el-checkbox {
    .el-checkbox__input {
      .el-checkbox__inner {
        width: 14px;
        height: 14px;
        border-radius: 3px;
        border: 1px solid var(--theme, #ff6a6c);
        background-color: var(--theme, #ff6a6c);
      }

      &.is-checked {
        .el-checkbox__inner {
          background-color: var(--theme, #ff6a6c);
          border-color: var(--theme, #ff6a6c);

          &::after {
            top: 0px;
            left: 4px;
            border-width: 2px;
          }
        }
      }

      &.is-indeterminate {
        .el-checkbox__inner {
          background-color: var(--theme, #ff6a6c);
          border-color: var(--theme, #ff6a6c);

          &::before {
            height: 3.4px;
            transform: scale(0.7);
            top: 4px;
          }
        }
      }
    }
    &.is-checked {
      .el-checkbox__label {
        color: var(--iw-theme-color);
      }
    }
  }

  &.el-popper[x-placement^="top"] {
    .popper__arrow {
      border-top-color: $IWindustryPopBgColor;
      &::after {
        border-top-color: $IWindustryPopBgColor;
      }
    }
  }
  &.el-popper[x-placement^="left"] {
    .popper__arrow {
      border-left-color: $IWindustryPopBgColor;
      &::after {
        border-left-color: $IWindustryPopBgColor;
      }
    }
  }
  &.el-popper[x-placement^="right"] {
    .popper__arrow {
      border-right-color: $IWindustryPopBgColor;
      &::after {
        border-right-color: $IWindustryPopBgColor;
      }
    }
  }
  &.el-popper[x-placement^="bottom"] {
    .popper__arrow {
      border-bottom-color: $IWindustryPopBgColor;
      &::after {
        border-bottom-color: $IWindustryPopBgColor;
      }
    }
  }

  .el-time-panel,
  &.el-time-panel {
    background: rgba(23,37,55, 1);
    border-color: rgba(23,37,55, 1);
    .el-time-spinner__item {
      color: #E8F2FE;
      &.active {
        color: $IWindustryPrimaryTextColor;
      }
      &:hover:not(.disabled):not(.active) {
        background-color: #1A2839;
      }
    }
    .el-time-panel__content::after, .el-time-panel__content::before {
      border-color: rgba(255, 255, 255, 0.2);
    }
    .el-time-panel__content::before {
      margin-left: 12px;
      margin-right: 12px;
    }
    .el-time-spinner__wrapper {

      + .el-time-spinner__wrapper {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
      }
    }
    .el-time-panel__btn {
      width: 48px;
      height: 24px;
      padding: 0;
      line-height: normal;
      color: #E8F2FE;
      border-radius: 4px;
      &.cancel {
        color: #E8F2FE;
        background: rgba(95,136,194,0.2);
      }
      &.confirm {
        color: #E8F2FE;
        font-weight: normal;
        background: linear-gradient(90deg, #4D9AF7 0%, #0862CD 100%);
      }
    }

    .el-time-panel__footer {
      padding: 12px;
      border-color: #3D4756;
      height: auto;
      // 设计师要求按钮排布反向
      display: flex;
      flex-direction: row-reverse;
    }
  }

  // 树组件覆写
  .el-tree {
    background: transparent;
    color: #E8F2FE;

    .el-tree-node__content {
      height: 32px;
    }

    .el-tree-node__content:hover {
      background: transparent;
    }

    &.el-tree--highlight-current {
      .el-tree-node.is-current>.el-tree-node__content {
        background-color: rgba(79, 159, 255, 0.40);
      }
    }

    .el-tree-node {
      &:focus {
        >.el-tree-node__content {
          background-color: rgba(79, 159, 255, 0.40);
        }
      }
      .el-tree-node__content:hover {
        background-color: rgba(79, 159, 255, 0.40);
      }
    }
  }

  // 表格覆写
  .el-table {
    .el-table__header-wrapper {
      background-color: rgba(79,159,255,0.2);

      th.is-leaf {
        padding: 5px 0;
      }
    }

    &.el-table--enable-row-hover {
      .el-table__body tr:hover > td {
        background-color: rgba(79, 159, 255, 0.40);
      }
    }
    &.el-table--small {
      .el-table__cell {
        padding: 5px 0;
      }
    }

    th.is-leaf,
    td.el-table__cell {
      border-bottom: 1px solid rgba(232, 243, 254, 0.2);
    }
    tr.current-row>td.el-table__cell {
      background-color: rgba(79, 159, 255, 0.40);
    }
    th.el-table__cell>.cell,
    tr.el-table__cell {
      color: var(--iw-text-color);
    }

    tr.el-table__row {
      color: var(--iw-text-color);
    }

    .el-table__empty-text {
      color: var(--iw-text-color);
    }
  }

  // 时间选择器覆写
  .el-date-editor {
    // 设计师好像要求的是这个图标，对使用这个图标的日期选择器做统一处理
    i.iconfont.icon-tongyong_icon_riqi {
      color: var(--iw-text-color);
      font-size: 20px;
      line-height: 26px;
      float: none;
      margin-left: 5px;
    }
    .el-range-input {
      color: var(--iw-text-color);
      font-size: 14px;
      background-color: transparent;
    }
    .el-range-separator {
      color: var(--iw-text-color);
    }
    .el-range-separator {
      color: var(--iw-text-color);
      line-height: normal !important; // 有其他样式污染了这个line-height，被迫important
      height: auto;
    }
    .el-input__icon.el-range__close-icon.el-icon-circle-close:before { // 统一覆写所有的el-icon-circle-close。注意，这会使得系统里失去原来那个空心版本
      color: var(--iw-text-color);
      font-size: 20px;
      font-family: 'iconfont';
      content: "\ec12"; // FIXME 注意，这个是基于iconfont的值，应该是涂色版的关闭图标，如果图标库有变动会出问题
    }
  }
  &.el-picker-panel {
    width: 490px;
    background: rgba(23,37,55, 1);
    border-color: rgba(23,37,55, 1);
    color: var(--iw-text-color);
    border-radius: 8px;
    .el-picker-panel__content.el-date-range-picker__content {
      padding: 0 12px;
      &.is-left {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
      }
    }
    &.has-sidebar {
      width: 576px;
    }
    &.has-time {
      .el-date-range-picker__header {
        margin-top: 0;
      }
    }
    .el-picker-panel *[slot=sidebar], .el-picker-panel__sidebar {
      width: 80px;
      border-right: 1px solid rgba(255, 255, 255, 0.2);
      +.el-picker-panel__body {
        margin-left: 80px;
      }
    }
    .popper__arrow {
      display: none;
    }
    &.el-popper[x-placement^="bottom"] {
      margin-top: 6px;
    }
    .el-date-range-picker__time-header {
      border-color: #3D4756;
      padding-bottom: 12px;

      .el-icon-arrow-right {
        color: var(--iw-text-color);
      }

      > .el-icon-arrow-right {
        color: transparent;
      }
    }
    .el-picker-panel__sidebar {
      padding-top: 0;
      background: transparent;
      .el-picker-panel__shortcut {
        color: var(--iw-text-color);
        &:hover {
          background: rgba(79, 159, 255, 0.40);
          border-right: 1px solid rgba(255, 255, 255, 0.2)
        }
      }
    }
    .el-picker-panel__body {
      min-width: auto;
    }
    .el-date-range-picker__header {
      color: var(--iw-text-color);
      padding: 10px 0;
      height: 32px;
      margin-top: 12px;
      line-height: 12px;
      position: relative;
      div {
        height: auto;
        font-size: 14px;
        display: flex;
        justify-content: center;
      }
      .el-picker-panel__icon-btn {
        font-size: 20px;
        padding: 0;
        margin-top: -4px;
        color: var(--iw-text-color);
        position: absolute;

        &.el-icon-d-arrow-left {
          left: 0px;
          font-family: 'iconfont' !important;
          &::before {
            content: '\ea80'
          }
        }
        &.el-icon-arrow-left {
          left: 20px;
          font-family: 'iconfont' !important;
          &::before {
            content: '\ea49'
          }
        }
        &.el-icon-d-arrow-right {
          right: 0px;
          font-family: 'iconfont' !important;
          &::before {
            content: '\ea7e'
          }
        }
        &.el-icon-arrow-right {
          right: 20px;
          font-family: 'iconfont' !important;
          &::before {
            content: '\ea47'
          }
        }
      }
    }
    .el-date-table {
      padding: 0 12px 12px 12px;
      font-size: 14px;
      tr {
        th {
          color: var(--iw-text-color);
          text-align: center;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
      }
      th {
        padding: 0;
      }
      td {
        padding: 0;
        height: 32px;
        &.prev-month,
        &.next-month {
          color: rgba(255, 255, 255, 0.4);
        }
        div {
          height: 32px;
        }
        span {
          width: 28px;
          height: 28px;
          line-height: 28px;
          top: 2px;
        }
        &.today {
          span {
            color: #4F9FFF;
          }
        }
        &.today.in-range {
          span {
            color: #fff;
          }
        }

        &.start-date {
          div {
            margin-left: 0;
            span {
            }
          }
        }
        &.end-date {
          div {
            margin-right: 0;
            span {
            }
          }
        }
      }
    }
    .el-date-table td.available:hover {
      color: var(--iw-text-color);
      span {
        background-color: rgba(79, 159, 255, 0.40);
      }
    }
    .el-date-table td.disabled div {
      background-color: transparent;
      color: rgba(255, 255, 255, 0.4);
    }
    .el-date-table td.in-range div {
      background-color: rgba(79, 159, 255, 0.40);
    }
    .el-date-table td.start-date span, .el-date-table td.end-date span {
      background: #4F9FFF;
    }
    .el-picker-panel__footer {
      background: transparent;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-color: #3D4756;
      padding: 12px;
      // 设计师要求按钮排布反向
      display: flex;
      flex-direction: row-reverse;

      .el-button {
        border: none;
        &.el-button--text.el-picker-panel__link-btn {
          color: #CCE3FF;
          background: rgba(95,136,194,0.2);
          padding: 7px 15px;
          font-size: 12px;
          border-radius: 3px;
        }
        &.el-button--default {
          color: #CCE3FF;
          background: linear-gradient(90deg, #4D9AF7 0%, #0862CD 100%);
        }

        + .el-button {
          margin-right: 10px;
        }
      }
    }
  }

  // 表单覆写
  .el-form {
    .el-form-item .el-form-item__label {
      color: var(--iw-text-color);
    }
  }

  // 加载中覆写
  .el-loading-spinner {
    .el-loading-text {
      color: #1373E6;
    }
    i {
      color: #1373E6;
    }
  }

  // 滚动条覆写
  // 使用element的叠加滚动条的组件，单独修改叠加滚动条的样式
  .el-scrollbar {
    &::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }
    .el-scrollbar__wrap {
      // el-scrollbar的偏移量会导致尺寸异常，推测这是它用来规避原生滚动条尺寸的
      // 强行覆盖它
      margin-bottom: 0 !important;
      margin-right: 0 !important;
      &::-webkit-scrollbar {
        width: 0px;
        height: 0px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: transparent;
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: transparent;
      }
      .el-scrollbar__view > div {
        &::-webkit-scrollbar {
          width: 0px;
          height: 0px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb:hover {
          background-color: transparent;
        }
      }
    }
    .el-scrollbar__bar {
      right: 0px;
    }
  }
  .el-scrollbar__thumb {
    background-color: rgba(79, 159, 255, 0.40);
  }
  // 滚动条覆写
  ::-webkit-scrollbar,
  &::-webkit-scrollbar {
    width: 6px ;
    height: 6px ;
    border-radius: 3px ;
  }

  ::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-thumb {
    border-radius: 3px ;
    background-color: rgba(79, 159, 255, 0.40);
    border: 0 ;
  }

  ::-webkit-scrollbar-thumb:hover,
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(79, 159, 255, 0.55);
  }

  .el-scrollbar__wrap {
    &::-webkit-scrollbar {
      width: 0px ; // 使用了el-scrollbar的容器，隐藏原生滚动条，交给scrollbar处理
    }
  }

  // ===== 自定义通用部分，下面的样式不属于通用覆盖原生或element组件样式，是用于本项目定制重复使用的东西 =====

  // 向上/下箭头
  .iwicon-boldArrowDown,.iwicon-boldArrowDown_commonPhrases {
    width: 18px;
    height: 18px;
    display:inline-block;
    vertical-align: middle;
    background-image: url("~@/assets/image/playBack/down.png");
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .iwicon-boldArrowUp,.iwicon-boldArrowUp_commonPhrases {
    width: 18px;
    height: 18px;
    display:inline-block;
    vertical-align: middle;
    background-image: url("~@/assets/image/playBack/up.png");
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .iwicon-boldArrowDown_commonPhrases {
    background-image: url("~@/assets/image/playBack/tongyong_down.png");
  }
  .iwicon-boldArrowUp_commonPhrases {
    background-image: url("~@/assets/image/playBack/tongyong_up.png");
  }
}
.ar-g{
  .iwhale-industrystyle.el-select-dropdown{
    background: linear-gradient(0deg, #1E1C0F 0%, #3D3811 100%) !important;
  }
}

// ————————以下是不在行业样式范围内的公用样式，请慎重添加这些样式！————————

// 用于覆盖顶部toast的样式。传入customClass
// FIXME 由于common.scss已经强行important了，无法处理，只能全部追加
.el-message.message-new.iw-style {
  --iw-text-color: #E8F3FE;

  .el-message__content {
    color: var(--iw-text-color) !important;
  }

  .more-detail {
    color: var(--iw-text-color) !important;
  }

  &.message-success-new,
  &.message-warning-new,
  &.message-error-new {
    background-color: #172537 !important;
    border-color: #172537 !important;

    .more-til,
    .el-message__closeBtn {
      color: var(--iw-text-color) !important;
    }

    &:after {
      border-color: #172537 !important;
    }
  }

  &.message-success-new {
    .el-message__icon {
      color: #13BE88 !important;
    }
  }

  &.message-warning-new{
    .el-message__icon {
      color: #4F9FFF !important;
      transform: rotate(180deg) !important;
    }
  }

  &.message-error-new{
    .el-message__icon {
      color: #FB913C !important;
      &::before {
        content: "\E7A3" !important;
      }
    }
  }

  &.lystyle {
    --iw-text-color: #FFF;
  }

  &.gtstyle {
    --iw-text-color: #E4E7C1;
    &.message-success-new,
    &.message-warning-new,
    &.message-error-new {
      background-color: rgba(22, 18, 9, .95) !important;
      border-color: rgba(22, 18, 9, .95) !important;
      color: #515a6e !important;
      &:after {
        border-color: rgba(22, 18, 9, .95) !important;
      }
    }
  }
}

// 拼接表单的手动div，替代会因为自带padding导致尺寸很难正确的el-row/el-col组合
// 这个东西会干掉form-item的右padding，只保留和label区域留出空隙的左padding
// 内部项目的元素宽度由自己定义，表单label要正常使用label-width
// 这个使用的是新（1.6.40以后）的12px的间距
.iw-formrow {
  display: flex;
  .el-form-item--small.el-form-item,
  .el-form-item {
    margin-bottom: 0;
    margin-right: 0;
    .el-form-item__label {
      padding: 0;
    }
    .el-form-item__content {
      padding: 0;
      padding-left: 12px;
    }
    + .el-form-item {
      margin-top: 0;
      margin-left: 12px;
    }
    &.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
      margin-right: 0;
    }
  }

  // label定宽，输入框自动分摊剩余宽度模式
  &.autowidth {
    .el-form-item {
      flex: 1;
      display: flex;
      .el-form-item__content {
        margin-left: 0px !important; // 由于自动宽度关系，margin-left失去意义
        flex: 1;
      }
    }
  }

  + .iw-formrow {
    margin-top: 0px; // 铁塔组件的ct-form-item自带margin-bottom: 12px !important, 无需在表单非首行再添加margin-top
  }
}

// 对表单自动撑高报错提示
// 实验性
.iw-form-error {
  .el-form-item {
    .el-form-item__error {
      &.el-zoom-in-top-leave-active {
        display: none;
      }
      padding-top: 0;
      padding-left: 0;
      color: #FF6A6C;
      position: static;
      text-align: left;
      // margin-top: 6px;
      margin-bottom: -6px;
      font-size: 12px;
    }
  }
}

// 下拉等宽样式
// 用于下拉框狂的popper-class

// 这个class用于popper-append-to-body为true（默认情况）的下拉列表
.iw-equalwidthbody {
  // 置width为0，使得下拉body只能使用el-selec他自己设置的min-width为实际宽度
  width: 0;
  .el-checkbox {
    margin-right: 6px;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    .el-checkbox__label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
// 这个class用于popper-append-to-body为false的下拉列表，定位会有问题所以会需要absolute
.iw-equalwidth {
  position: absolute !important;
  left: 0;
  width: 100%;
  top: 0;
  .el-checkbox {
    margin-right: 6px;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    .el-checkbox__label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
